<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .center {
            width: 50%;
            height: 60%;
            margin: 0 auto;
            /* box-shadow: 2px 2px 3px 5px; */
            border: 2px #ccc solid;
            border-radius: 15px;
            box-shadow: 0px 0px 10px 1px;
            background-color: white;
            position: fixed;
            top: 25%;
            left: 25%;
            min-width: 1000px;
        }

        h2 {
            text-align: center;
            margin: 10px auto;
        }

        .left {
            width:40%;
            height: 90%;
            /* border: 3px red solid; */
            margin: 30px;
            float: left;
            border-right: 1px #ccc solid;
            text-align: center;

        }

        img {
            margin: 10px auto ;
            width: 200px;
            height: 200px;
            background-color: red;
            margin:0px auto;
        }

        p {
            color: #6f6f6f;
            text-align: center;
        }

        span {
            color: red;
        }

        h4 {
            text-align: center;
            color: #ccc;
            margin-top: 20px;
        }

        .right {
            width: 430px;
            height: 450px;
            /* border: 3px red solid; */
            margin: 20px 30px;
            float: left;

        }

        .right form input {
            width: 320px;
            height: 40px;
            margin: 10px 50px;
            background-color: #f5dddd;
            border-radius: 5px;

        }

        .button {
            background-color: rgb(213, 144, 16);
            width: 325px;
            height: 50px;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            color: white;
            margin-top: 110px;
            margin-left: 50px;
        }

        .two {
            width: 430px;
            height: 30px;
            text-align: center;
        }

        .two img {
            width: 25px;
            height: 25px;
            margin: 5px 5px;
            display: inline-block;
        }

        .two p {
            font-size: 18px;

        }

        input {
            font-size: 20px;
        }

        .three {
            width: 325px;
            height: 50px;
            margin: 10px 50px;
        }

        .dw {
            position: absolute;
        }

        .dw a {
            position: relative;
            float: right;
            top: 20px;
            left: -130px;
            text-decoration: none;
            font-size: 18px;
        }

        .three p {
            font-size: 16px;
        }

        .right .cw {
            clear: both;
            /* text-align: center; */
            /* line-height: 100px; */
            margin-left: 55px;
        }
        #checkImg{
            width: 80px;
            height: 40px;
        }
        video{
            position: absolute;
            min-width: 2000px;
            width: 100%;
            z-index: -1;
        }
    </style>
    <script src="./js/jquery-3.7.1.js"></script>
</head>

<body>
    <div class="bg"><video autoplay muted loop src="https://sf3-cdn-tos.toutiaostatic.com/obj/mp/welcome-video.mp4" poster="https://sf3-cdn-tos.toutiaostatic.com/obj/mp/welcome-video-poster-v2.png" class="video"></video>
    <div class="center">
        <div class="left">
            <h2>手机扫码登录</h2>
            <img src="./img/2weima.jfif" alt="">
            <p>打开<span>今日头条APP</span>--点击左上角扫一扫</p>
            <h4>怎么扫码登录?</h4>
        </div>
        <div class="right">
            <h2><span>密码登录</span> | 短信登录</h2>
            <form method="post" onsubmit="return false;">
                <p><input type="text" name="" id="userId" placeholder="请输入账号"></p>
                <p><input type="password" name="" id="userPwd" placeholder="请输入密码"><a href="#" id="forget">忘记密码</a></p>
                <p><input type="text" name="" id="checkNum" placeholder="请输入验证码"><img src="http://10.47.164.204:8080/servletdemo/NumServlet"id="checkImg"></p>
                <p id="queding"><input type="password" name="" id="userPwdagin" placeholder="确定密码"></p>
                <p><button id="login" >登录</button> <button id="register">注册</button></p>
                <p id="a"><span class="msg"></span></p>
            </form>
            <div class="two">
                <p>
                    <img src="./images/Image1.gif" alt=""><img src="./images/Image2.gif" alt="">| 忘记账号 | 免费注册
                </p>

            </div>
            <div class="three">
                <p><input type="radio" name="" id="" class="quan">
                    已阅读并同意以下协议<span>淘宝平台服务协议、隐私权政策、法律声明、支付宝及客户端服务协议</span></p>
            </div>
        </div>
    </div>
</div>
    <script>
        $(document).on("click", "#login", function () {
            let userId = $("#userId").val().trim();
            let userPwd = $("#userPwd").val().trim();
            let checkNum = $("#checkNum").val().trim();
            console.log(checkNum);
            let settings = {
                "url": "http://10.47.164.204:8080/servletdemo/LoginServlet",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Content-Type": "application/json"
                },
                "xhrFields": {
        withCredentials: true // 允许携带跨域 Cookie
    },
                "data": JSON.stringify({
                    "userId": userId,
                    "userPwd": userPwd,
                    "checkNum":checkNum
                }),
            };
            $.ajax(settings).done(function (response) {
                let code =JSON.parse(response).code;
                let msg =JSON.parse(response).msg;
                if(code===500){

                }else if(code===200){
                    window.localStorage.setItem("name",userId);
                   window.location.href="news.html";
                }
                console.log(msg);
                $(".msg").text(msg)

            });
        })
        $(document).on("click", "#register", function () {
            let userId = $("#userId").val().trim();
            let userPwd = $("#userPwd").val().trim();
            let settings = {
                "url": "http://10.47.164.204:8080/servletdemo/RegisterServlet",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({
                    "userId": userId,
                    "userPwd": userPwd
                }),
            };

            $.ajax(settings).done(function (response) {
                let code =JSON.parse(response).code;
                let msg =JSON.parse(response).msg;
                if(code===500){
                    $("span").text(msg)
                }else if(code===200){
                    $("span").text(msg)
                    $("#userId").val("")
                    $("#userPwd").val("");
                }
            });
        })
        $(document).on("click", "#forget", function () {
            // $("#userId").val("");
            $("#userPwd").val("");
            $("#forget").hide();
            $("#register").hide();
            $("#login").hide();
            $("#yes").show();
        })
        $(document).on("click", "#yes", function () {
            let userId = $("#userId").val().trim();
            let userPwd = $("#userPwd").val().trim();
            let settings = {
                "url": "http://10.47.164.204:8080/servletdemo/ForgetPwdServlet",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({
                    "userId": userId,
                    "userPwd": userPwd,
                }),
            };
            $.ajax(settings).done(function (response) {
                let code =JSON.parse(response).code;
                let msg =JSON.parse(response).msg;
                if(code===500){
                    $("span").text(msg)
                }else if(code===200){
                    $("span").text(msg)
                    $("#forget").show();
                    $("#register").show();
                    $("#login").show();
                    $("#yes").hide();
                }
            });
        })
        $("#checkImg").click(function(){
            this.src="http://10.47.164.204:8080/servletdemo/NumServlet?s="+new Date()
        })
    </script>
</body>

</html>